<template>
  <div class="form">
    <div class="w-full sm:flex justify-center">
      <div class="w-full flex-1">
        <label for="email"
          class="sr-only">{{placeholder ? placeholder : $t('searchAIToolsByKeyword')}}</label>
        <div class="relative">
          <input type="text"
            name="keyword"
            v-model="keyword"
            :placeholder="placeholder ? placeholder : $t('searchAIToolsByKeyword')"
            @keyup.enter="toSearh()"
            class="search-ipt block w-full px-5 border border-white text-base text-gray-900 placeholder-gray-1900 border-transparent hover:border-purple-1300 focus:border-purple-1300 focus:outline-none" />
          <div class="absolute inset-y-0 right-5 flex items-center cursor-pointer to-search"
            @click="toSearh">
            <svg-icon className="text-xl"
              iconName='search'></svg-icon>
          </div>

          <input type="submit"
            class="absolute inset-y-0 right-5 flex items-center cursor-pointer submitBtn">
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'Tools',
  props: {
    placeholder: {
      type: String | null,
      default: null,
    },
  },
  data() {
    return {
      keyword: null,
      actionUrl: this.$route.fullPath,
    }
  },
  computed: {
    ...mapState({
      locale: (state) => state.locale,
    }),
  },
  created() {
    this.keyword = this.$route.params.keyword
  },
  methods: {
    toSearh() {
      if (this.hasRealVal(this.keyword)) {
        this.$router.push({
          name:
            this.locale === 'en'
              ? 'gpts-search-keyword'
              : 'lang-gpts-search-keyword',
          params: {
            keyword: this.keyword,
          },
        })
      } else {
        this.$router.push({
          name: this.locale === 'en' ? 'gpts' : 'lang-gpts',
        })
      }
    },
  },
}
</script>
<style lang='scss' scoped>
.form {
  font-size: 0;
  .search-ipt {
    height: 58px;
    border-radius: 29px;
  }
}
</style>
